<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title>技术需求</title>
    <#--/公共引入包-->
    <#include "include.ftl">
    <#---->
</head>
<body class="background_grey">
    <#--/header-->
    <#include "header.ftl">
    <#---->
    <div class="requirement_write_banner">
        <div class="requirement_write_banner_in">
            <img src="/images/index_banner_small1.png" alt="" />
        </div>
    </div>
    <div class="problem_list">
        <div class="problem_list_left">
            <div class="requirement_index_condition">
                <div class="requirement_index_condition_one requirement_index_condition_item">
                    <div class="requirement_index_condition_title">类型</div>
                    <ul class="requirement_index_condition_one_list" id="one_list">
                        <li class="active item1">全部分类</li>
                        <li class="item2">人工智能</li>
                        <li class="item3">新能源</li>
                        <li class="item4">新材料</li>
                        <li class="margin five item5">医疗与健康</li>
                        <li class="item6">信息科技</li>
                        <li class="five item7">食品与安全</li>
                        <li class="five item8">检验与检测</li>
                        <li class="item9">航空航天</li>
                    </ul>
                    <div class="clear_both"></div>
                </div>
                <div class="requirement_index_condition_two requirement_index_condition_item">
                    <div class="requirement_index_condition_title">类型</div>
                    <ul class="requirement_index_condition_two_list" id="two_list">
                        <li class="active item1">所有</li>          
                        <li class="item2">0-1000</li>
                        <li class="item3">1000-2000</li>
                        <li class="item4">2000-5000</li>
                        <li class="item5">5000-1w</li>
                        <li class="margin item6">1w-5w</li>
                        <li class="left item7">5w-20w</li>
                        <li class="item8">20w以上</li>
                    </ul>
                    <div class="clear_both"></div>
                </div>
                <div class="requirement_index_condition_three requirement_index_condition_item">
                    <div class="requirement_index_condition_title">类型</div>
                    <ul class="requirement_index_condition_three_list"  id="three_list">
                        <li class="active item1">所有</li>          
                        <li class="item2">招标中</li>
                        <li class="item3">待选标</li>
                        <li class="item4">进行中</li>
                        <li class="item5">已完成</li>
                    </ul>
                    <div class="clear_both"></div>
                </div>
            </div>
            <div class="requirement_index_show">
                <div class="requirement_index_show_title">
                    <div class="requirement_index_show_title_sort">
                        排序
                    </div>
                    <div class="requirement_index_show_title_ipt">
                        <input type="text" placeholder="搜索" />
                        <span></span>
                    </div>
                </div>
                <div class="requirement_index_show_list">
                    <ul id="requirement_list">
                        <li class="requirement_index_show_item">
                            <a href="http://baidu.com">
                                <div class="requirement_index_show_item_img">
                                    <img src="" alt="" />
                                </div>
                                <div class="requirement_index_show_item_info">
                                    <div class="requirement_index_show_item_info_title">
                                        <div class="left">
                                            <h3>数据统计功能</h3>
                                            <p class="blue_btn">招标中</p>
                                        </div>
                                        <div class="right">
                                            ¥<span>1,200</span>
                                        </div>
                                    </div>
                                    <div class="requirement_index_show_item_info_detail">
                                        根据文档说明和UE设计，实现教育系统管理端的课程列表、创建课程和修改课程3个管理端页面和1个获取用户购买课程列表的接口，并完成指定...
                                    </div>
                                    <div class="requirement_index_show_item_info_icon">
                                        <span class="time">2天0小时</span>
                                        <span class="medal">131</span>
                                        <span class="message">信息科技</span>
                                    </div>
                                </div>
                                <div class="clear_both"></div>
                            </a>
                        </li>
                        <li class="requirement_index_show_item">
                            <a href="http://232323">

                                <div class="requirement_index_show_item_img">
                                    <img src="" alt="" />
                                </div>
                                <div class="requirement_index_show_item_info">
                                    <div class="requirement_index_show_item_info_title">
                                        <div class="left">
                                            <h3>数据统计功能</h3>
                                            <p class="blue_btn">招标中</p>
                                        </div>
                                        <div class="right">
                                            ¥<span>1,200</span>
                                        </div>
                                    </div>
                                    <div class="requirement_index_show_item_info_detail">
                                        根据文档说明和UE设计，实现教育系统管理端的课程列表、创建课程和修改课程3个管理端页面和1个获取用户购买课程列表的接口，并完成指定...
                                    </div>
                                    <div class="requirement_index_show_item_info_icon">
                                        <span class="time">2天0小时</span>
                                        <span class="medal">131</span>
                                        <span class="message">信息科技</span>
                                    </div>
                                </div>
                                <div class="clear_both"></div>
                            </a>
                        </li>
                        <li class="requirement_index_show_item">
                            <div class="requirement_index_show_item_img">
                                <img src="" alt="" />
                            </div>
                            <div class="requirement_index_show_item_info">
                                <div class="requirement_index_show_item_info_title">
                                    <div class="left">
                                        <h3>数据统计功能</h3>
                                        <p class="blue_btn">招标中</p>
                                    </div>
                                    <div class="right">
                                        ¥<span>1,200</span>
                                    </div>
                                </div>
                                <div class="requirement_index_show_item_info_detail">
                                    根据文档说明和UE设计，实现教育系统管理端的课程列表、创建课程和修改课程3个管理端页面和1个获取用户购买课程列表的接口，并完成指定...
                                </div>
                                <div class="requirement_index_show_item_info_icon">
                                    <span class="time">2天0小时</span>
                                    <span class="medal">131</span>
                                    <span class="message">信息科技</span>
                                </div>
                            </div>
                            <div class="clear_both"></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="requirement_index_page">
                <div class="personage_deal_page">
                    <div class="personage_deal_page_show">
                        <span>共 <span class="sum_page">0</span> 页</span>到第<input type="text" class="input_page"/>页 <i id="btnPage">确认</i>
                    </div>
                    <div class="personage_deal_page_num">
                        <!-- <span class="prev" id="prev">&lt;</span> -->
                        <div class="personage_deal_page_num_in" id="page_num">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="problem_detail_right" id="fixed_right">
            <div class="problem_detail_right_top">
                <div class="requirement_write_right_top_iphone">
                    <h3>400-800-1985</h3>
                    <p>客服时间：09:00~19:00</p>
                </div>
            </div>
            <div class="problem_detail_right_bottom">
                <ul class="requirement_write_right_bottom_list">
                    <li>
                        <div class="requirement_write_right_bottom_item_img"></div>
                        <div class="requirement_write_right_bottom_item_info">
                            <p>全程托管</p>
                            <span>更安全，更安心</span>
                        </div>
                    </li>
                    <li>
                        <div class="requirement_write_right_bottom_item_img"></div>
                        <div class="requirement_write_right_bottom_item_info">
                            <p>全程托管</p>
                            <span>更安全，更安心</span>
                        </div>
                    </li>
                    <li>
                        <div class="requirement_write_right_bottom_item_img"></div>
                        <div class="requirement_write_right_bottom_item_info">
                            <p>全程托管</p>
                            <span>更安全，更安心</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="index_link">
        <div class="index_link_in"></div>
    </div>
    <div class="index_footer">
        <div class="index_footer_link">
            <a href="">新闻公告</a>|
            <a href="">关于我们</a>|
            <a href="">联系我们</a>|
            <a href="">用户协议</a>
        </div>
        <p class="index_footer_copy">Copyright©2016 yk-zb.com 粤科众包 版权所有 粤ICP备16027165号-1</p>
    </div>
    <div class="shadow">
        <div class="problem_shadow">
            <div class="problem_shadow_title">
                我要提问<span>X</span>
            </div>
            <div class="problem_shadow_main">
                <input type="text" placeholder="写下你的问题" class="problem_shadow_ipt"/>
                <p>问题描述（选填）：</p>
                <textarea name="" id="" cols="30" rows="10" placeholder="请填写问题的详细描述···" class="problem_shadow_textarea"></textarea>
                <p>选择标签：</p>
                <select name="" id="" class="problem_shadow_select">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
                <div class="problem_shadow_btn">
                    <span class="publish" id="btn_publish">发布</span>
                    <span class="abolish" id="btn_abolish">取消</span>
                </div>
            </div>
        </div>
    </div>
    <script id="requirementItem" type="text/template">
        <li class="requirement_index_show_item">
            <div class="requirement_index_show_item_img">
                <img src="<>" alt="" />
            </div>
            <div class="requirement_index_show_item_info">
                <div class="requirement_index_show_item_info_title">
                    <div class="left">
                        <h3>数据统计功能</h3>
                        <p class="blue_btn"><></p>
                    </div>
                    <div class="right">
                        ¥<span><></span>
                    </div>
                </div>
                <div class="requirement_index_show_item_info_detail">
                    <>
                </div>
                <div class="requirement_index_show_item_info_icon">
                    <span class="time"><></span>
                    <span class="medal"><></span>
                    <span class="message"><></span>
                </div>
            </div>
            <div class="clear_both"></div>
        </li>
    </script>
</body>
<script type="text/javascript" src="/view/underscore/underscore-min.js"></script>
<script type="text/javascript" src="/js/list_more.js"></script>
<script type="text/javascript" src="/js/paging.js"></script>
<script type="text/javascript" src="/js/fixation.js"></script>
<script type="text/javascript" src="/js/arttemplate.min.js"></script>
<script type="text/html" id="tpl-projectList">
    {{each list as project}}
        <li class="requirement_index_show_item">
            <a href="/project/projectInfo?projectId={{project.id}}">
                <div class="requirement_index_show_item_img">
                    <img src="{{project.projectImg}}" onerror="this.src='/images/load_image_error.png'"/>
                </div>
                <div class="requirement_index_show_item_info">
                    <div class="requirement_index_show_item_info_title">
                        <div class="left">
                            <h3>{{project.projectTitle}}</h3>
                            <p class="blue_btn">
                                {{if project.projectType == 1}}
                                   招标中
                                {{else if project.projectType == 1}}
                                   悬赏中
                                {{else}}
                                   招标中
                                {{/if}}
                            </p>
                        </div>
                        <div class="right">
                            ¥<span>{{project.projectMoney}}</span>
                        </div>
                    </div>
                    <div class="requirement_index_show_item_info_detail">
                        {{project.brief}}
                    </div>
                    <div class="requirement_index_show_item_info_icon">
                        <span class="time">2天0小时</span>
                        <span class="medal">{{project.goodsNum}}</span>
                        <span class="message">信息科技</span>
                    </div>
                </div>
                <div class="clear_both"></div>
            </a>
        </li>
    {{/each}}
</script>
</html>
<script type="text/javascript">

    var classify = getParam("category");//分类
    var moneyMin = null; //最小钱数
    var moneyMax = null; //最大钱数
    var state = null; //类型
    var currPage = 1;
    var pageSize = 10;
    var pageNum = 0;

    $(function() {
        if(classify){
            $("#one_list li").each(function(){
                if($(this).text() == classify){
                    $(this).addClass('active').siblings().removeClass('active');
                }
            })
        }
        classifySearch();
        /*页数的确认按钮*/
        $('#btnPage').click(function(event) {
            var currPage = $('.input_page').val();
            paging(currPage,pageSize);
        });
        /*第几页的输入框*/
        $('.input_page').keyup(function(event) {
              var reg = /^[0-9]+$/ ;
              var str = $('.input_page').val();
              if(str.length != 0){
                  if(!reg.test(str)){
                      UBox.show("输入数字", -1);
                      $('.input_page').val('');
                      return false;
                  }else{
                      var strNum = parseInt(str);
                      var sumPage = parseInt($('.sum_page').html());
                      if(strNum > allNum){
                          UBox.show("超出页数范围", -1);
                          $('.input_page').val(sumPage);
                          return false;
                      }else if(strNum < 1){
                          UBox.show("超出页数范围", -1);
                          $('.input_page').val('1');
                          return false;
                      }
                  }
              }
        });
        /*第几页的输入框*/
        $('.input_page').change(function(event) {
              var reg = /^[0-9]+$/ ;
              var str = $('.input_page').val();
              if(!reg.test(str)){
                  UBox.show("输入数字", -1);
                  return false;
                  $('.input_page').val('');
              }else{
                  var strNum = parseInt(str);
                  var sumPage = parseInt($('.sum_page').html());
                  if(strNum > allNum){
                      UBox.show("超出页数范围", -1);
                      $('.input_page').val(sumPage);
                      return false;
                  }else if(strNum < 1){
                      UBox.show("超出页数范围", -1);
                      $('.input_page').val('1');
                      return false;
                  }
              }
        });
        $('#one_list li').click(function(event) {
            addActive($(this));
        });
        $('#two_list li').click(function(event) {
            addActive($(this));
        });
        $('#three_list li').click(function(event) {
            addActive($(this));
        });
    });


    /*分类搜索*/
    function classifySearch(){
        var one = $('#one_list li.active').html() ;
        var two = $('#two_list li.active').html() ;
        switch(two){
            case '0-1000':
                moneyMin = 0; //最小钱数
                moneyMax = 1000; //最大钱数
                break;
            case '1000-2000':
                moneyMin = 1000; //最小钱数
                moneyMax = 2000; //最大钱数
                break;
            case '2000-5000':
                moneyMin = 2000; //最小钱数
                moneyMax = 5000; //最大钱数
                break;
            case '5000-1w':
                moneyMin = 5000; //最小钱数
                moneyMax = 10000; //最大钱数
                break;
            case '1w-5w':
                moneyMin = 10000; //最小钱数
                moneyMax = 50000; //最大钱数
                break;
            case '5w-20w':
                moneyMin = 50000; //最小钱数
                moneyMax = 200000; //最大钱数
                break;
            case '20w以上':
                moneyMin = 200000; //最小钱数
                moneyMax = null; //最大钱数
                break;
            default:
                moneyMin = null; //最小钱数
                moneyMax = null; //最大钱数
                break;
        }
        var state = $('#three_list li.active').html() ;
        switch(state){
            case '招标中':
                state = 0;
                break;
            case '待选标':
                state = 1000;
                break;
            case '进行中':
                state = 2000;
                break;
            case '已完成':
                state = 5000;
                break;
            default:
                state = null;
                break;
        }
        var param = {
            'one' : one,
            'two' : two ,
            'three' : state
        };
        $.ajax({
            type:"POST",
            url:"/project/searchproject",
            data:param ,
            dataType: "json",
            success: function(data){
                currPage = data.data.currPage;
                pageNum = data.data.pages;
                $('.sum_page').text(pageNum);
                paging(currPage,pageNum);
            },
            error: function(data){
                UBox.show("提交失败", -1);
            }
        });
    }
    /*点击添加active,并且搜索*/
    function addActive(obj){
        obj.addClass('active').siblings().removeClass('active');
        classifySearch();
    }
    /*分页*/
    function paging(currPage,pageNum){
        var obj = document.getElementById("page_num");
        var one = $('#one_list li.active').html() ;
        var two = $('#two_list li.active').html() ;
        switch(two){
            case '0-1000':
                moneyMin = 0; //最小钱数
                moneyMax = 1000; //最大钱数
                break;
            case '1000-2000':
                moneyMin = 1000; //最小钱数
                moneyMax = 2000; //最大钱数
                break;
            case '2000-5000':
                moneyMin = 2000; //最小钱数
                moneyMax = 5000; //最大钱数
                break;
            case '5000-1w':
                moneyMin = 5000; //最小钱数
                moneyMax = 10000; //最大钱数
                break;
            case '1w-5w':
                moneyMin = 10000; //最小钱数
                moneyMax = 50000; //最大钱数
                break;
            case '5w-20w':
                moneyMin = 50000; //最小钱数
                moneyMax = 200000; //最大钱数
                break;
            case '20w以上':
                moneyMin = 200000; //最小钱数
                moneyMax = null; //最大钱数
                break;
            default:
                moneyMin = null; //最小钱数
                moneyMax = null; //最大钱数
                break;
        }
        var state = $('#three_list li.active').html() ;
        switch(state){
            case '招标中':
                state = 0;
                break;
            case '待选标':
                state = 1000;
                break;
            case '进行中':
                state = 2000;
                break;
            case '已完成':
                state = 5000;
                break;
            default:
                state = null;
                break;
        }
        var param = {
            'one' : one,
            'two' : two ,
            'three' : state,
            'currPage':currPage,
            'pageSize':10
        };
        page({
            obj : obj,
            currPage : currPage,
            pageNum : pageNum,
            callback : function (currPage,pageNum){
                $.ajax({
                    type: 'POST',
                    url: '/project/searchproject',
                    data:param,
                    rnd: new Date().getTime(),
                    dataType: "json",
                    success: function(result) {
                        if(result.success){
                            var list = result.data.list;
                            var projectHtml = template.render('tpl-projectList', {list : list});
                            $('#requirement_list').html(projectHtml);
                        }else{
                            UBox.show('加载失败', -1);
                        }
                    }
                });
            }
        });
    };


</script>